<template>
  <div ref="filterTree" class="filter-tree">
    <a-row :gutter="24" style="margin-bottom: 12px;">
      <a-col :md="24">
        <a-input :placeholder="searchPlaceholder" :allowClear="true" v-model="text" @keyup.enter="searchText" @change="onChange" ref="inputText" style="width:300px;margin-right:8px;" />
        <a-button type="primary" @click="searchText">查询</a-button>
      </a-col>
    </a-row>

    <section class="tags-toggle" v-if="showRootArray">
      <div class="left">
        <p>查询标签</p>
        <div class="tags">
          <template v-for="(tag, index) in rootArray">
            <template v-if="tag.codes.length > 0">
              <a-tooltip v-if="tooltipString(tag.names).length > 20" :key="tag.title" :title="tooltipString(tag.names)">
                <a-tag :key="tag.title" :closable="true" @close="() => handleClose(tag, index)"> {{ tag.title }}: {{ tag.names | longString }} </a-tag>
              </a-tooltip>
              <a-tag v-else :key="tag.title" :closable="true" @close="() => handleClose(tag, index)"> {{ tag.title }}: {{ tag.names | arrToString }} </a-tag>
            </template>
          </template>
          <a-button type="link" @click="resetFilter" v-show="showReset(rootArray)">清空</a-button>
        </div>
      </div>
      <a-button type="link" @click="toggleAdvanced"> {{ advanced ? '收起筛选' : '展开筛选' }}<a-icon :type="advanced ? 'up' : 'down'" /> </a-button>
    </section>
    <collapse>
      <section class="tags-content" ref="tagsContent" v-show="advanced">
        <template v-if="treeList.length > 0">
          <div v-for="(item, index) in treeList" :key="index" style="display:flex;" class="line">
            <span class="title" style="">{{ item.name }}：</span>
            <!-- 多选 -->
            <template v-if="item.isMuilt">
              <template v-if="isLeaf(item.children)">
                <a-checkbox-group :value="item.checkList" @change="e => onCheckChange(e, item)" class="check-group" style="flex-wrap:wrap;">
                  <a-checkbox :value="nextItem.code" v-for="(nextItem, nextIndex) in toggeleList(item)" :key="nextIndex">{{ nextItem.name }}</a-checkbox>
                  <a-button type="link" @click="toggleItem(item)" class="advanced-item" v-if="item.toggleNum > 0" style="top:0"
                    >{{ item.toggle ? '收起类目' : '展开类目' }}<a-icon :type="item.toggle ? 'up' : 'down'"
                  /></a-button>
                </a-checkbox-group>
              </template>
              <template v-else>
                <!-- 各行tab唯一 -->
                <template v-if="useActiveCodeObj">
                  <section class="tab-content" id="activeCodeAss" v-show="activeCodeObj">
                    <div v-for="(nextItem, nextIndex) in toggeleList(item)" :key="nextIndex" class="tabs">
                      <p
                        :id="`childTab${nextItem.id}`"
                        @click="changeTab(nextItem.id, nextIndex, item.id)"
                        :class="[nextItem.id == activeCodeObj[`activeTab${item.id}`] ? 'active-tab' : '']"
                        :style="{ marginBottom: nextItem.id == activeCodeObj[`activeTab${item.id}`] ? '48px' : '12px' }"
                      >
                        <span :class="checkAllItem(nextItem)">{{ nextItem.name }}</span>
                      </p>
                      <div
                        :id="`child${nextItem.id}`"
                        class="tabs-children "
                        :class="activeCodeObj[`activeTab${item.id}`]"
                        v-show="nextItem.id == activeCodeObj[`activeTab${item.id}`]"
                        :style="{
                          width: tabContentWidth(nextItem.id, activeCodeObj[`activeTab${item.id}`], filterObj),
                          left: tabContentLeft(nextItem.id, activeCodeObj[`activeTab${item.id}`], filterObj, tabObjAss[`activeTab${item.id}`])
                        }"
                      >
                        <template v-if="nextItem.children && nextItem.children.length > 0">
                          <a-checkbox :indeterminate="nextItem.indeterminate" :checked="nextItem.checkAll" @change="e => onCheckAllChange(e, nextItem)" class="check-all">全部</a-checkbox>
                          <a-checkbox-group :value="nextItem.checkList" @change="e => onCheckChange(e, nextItem)" class="check-group">
                            <a-checkbox :value="childItem.code" v-for="(childItem, childIndex) in nextItem.children" :key="childIndex">{{ childItem.name }}</a-checkbox>
                          </a-checkbox-group>
                        </template>
                      </div>
                    </div>
                    <a-button type="link" @click="toggleItem(item)" class="advanced-item" v-if="item.toggleNum > 0"
                      >{{ item.toggle ? '收起类目' : '展开类目' }}<a-icon :type="item.toggle ? 'up' : 'down'"
                    /></a-button>
                  </section>
                </template>
                <!-- 唯一tab -->
                <section class="tab-content" id="activeCode" v-else>
                  <div v-for="(nextItem, nextIndex) in toggeleList(item)" :key="nextIndex" class="tabs">
                    <p
                      :id="`childTab${nextItem.id}`"
                      @click="changeTab(nextItem.id, nextIndex)"
                      :class="[nextItem.id == activeCode ? 'active-tab' : '']"
                      :style="{ marginBottom: nextItem.id == activeCode ? '48px' : '12px' }"
                    >
                      <span :class="checkAllItem(nextItem)">{{ nextItem.name }}</span>
                    </p>
                    <div
                      :id="`child${nextItem.id}`"
                      class="tabs-children"
                      v-show="nextItem.id == activeCode"
                      :style="{ width: nextItem.id == activeCode ? filterObj.width + 'px' : 'auto', left: nextItem.id == activeCode ? filterObj.left - tabObj.left + 'px' : '0px' }"
                    >
                      <a-checkbox :indeterminate="nextItem.indeterminate" :checked="nextItem.checkAll" @change="e => onCheckAllChange(e, nextItem)" class="check-all">全部</a-checkbox>
                      <a-checkbox-group :value="nextItem.checkList" @change="e => onCheckChange(e, nextItem)" class="check-group">
                        <a-checkbox :value="childItem.code" v-for="(childItem, childIndex) in nextItem.children" :key="childIndex">{{ childItem.name }}</a-checkbox>
                      </a-checkbox-group>
                    </div>
                  </div>
                  <a-button type="link" @click="toggleItem(item)" class="advanced-item" v-if="item.toggleNum > 0"
                    >{{ item.toggle ? '收起类目' : '展开类目' }}<a-icon :type="item.toggle ? 'up' : 'down'"
                  /></a-button>
                </section>
              </template>
            </template>
            <!-- 单选 -->
            <template v-else>
              <a-checkbox-group name="radioGroup" v-model="item.checkList" @change="e => onRadioChange(e, item)" class="radio-group">
                <a-checkbox :value="nextItem.code" v-for="(nextItem, nextIndex) in item.children" :key="nextIndex">{{ nextItem.name }}</a-checkbox>
              </a-checkbox-group>
              <div v-if="item.isCustom">
                <a-input-number :min="0" :step="1" placeholder="最低" v-model="item.cusArr[0]" ref="lPrice" @keyup.enter="v => changeCustomLowConfirm(v, item)" /> ~
                <a-input-number :min="0" :step="1" placeholder="最高" v-model="item.cusArr[1]" ref="hPrice" @keyup.enter="v => changeCustomHighConfirm(v, item)" />
              </div>
            </template>
          </div>
        </template>
        <template v-if="showHighest">
          <a-button type="link" @click="highest = !highest" class="highest-toggle" :style="{ top: (treeList.length - 1) * 40 + 'px' }">
            {{ highest ? '收起高级筛选' : '展开高级筛选' }}<a-icon :type="highest ? 'up' : 'down'" />
          </a-button>
          <section class="highest-content" :style="{ maxHeight: highest ? '800px' : '0' }">
            <div v-for="(item, index) in highTreeList" :key="item.id + index" style="display:flex;" class="line">
              <span class="title" style="">{{ item.name }}：</span>
              <template v-if="item.isMuilt"></template>
              <!-- 单选 -->
              <template v-else>
                <a-checkbox-group name="radioGroup" v-model="item.checkList" @change="e => onRadioChange(e, item)" class="radio-group">
                  <a-checkbox :value="nextItem.code" v-for="(nextItem, nextIndex) in item.children" :key="nextIndex">{{ nextItem.name }}</a-checkbox>
                </a-checkbox-group>
                <div v-if="item.isCustom">
                  <a-input-number :min="0" :step="1" placeholder="最低" v-model="item.cusArr[0]" ref="lPrice" @keyup.enter="v => changeCustomLowConfirm(v, item)" /> ~
                  <a-input-number :min="0" :step="1" placeholder="最高" v-model="item.cusArr[1]" ref="hPrice" @keyup.enter="v => changeCustomHighConfirm(v, item)" />
                </div>
              </template>
            </div>
          </section>
        </template>
      </section>
    </collapse>
  </div>
</template>
<script>
import collapse from '../_util/collapse'
export default {
  components: { collapse },
  props: {
    // 筛选树
    treeData: {
      type: Array
    },
    // 高级筛选树
    highTreeData: {
      type: Array,
      required: false,
      default: () => {
        return []
      }
    },
    // 商品库 性别
    gender: {
      type: [String, Number],
      default: null,
      required: false
    },
    // 初始化筛选项
    initialRootArray: {
      type: Array,
      default: () => {
        return []
      },
      required: false
    },
    // 搜索框Placeholder
    searchPlaceholder: {
      type: String,
      required: false,
      default: '请输入'
    },
    // 搜索时保留的筛选项
    searchKeep: {
      type: Array,
      required: false,
      default: () => {
        return []
      }
    },
    showHighest: {
      type: Boolean,
      required: false,
      default: false
    },
    showRootArray: {
      type: Boolean,
      required: false,
      default: true
    },
    useActiveCodeObj: {
      type: Boolean,
      required: false,
      default: false
    }
  },
  data() {
    return {
      loadingSke: true,
      text: '',
      advanced: true,
      rootArray: [],
      treeList: [],
      highTreeList: [],
      activeCode: '',
      filterWidth: null,
      filterObj: null,
      tabObj: null,
      childObj: null,
      childHeight: 0,
      highest: false,
      highRootArray: [],
      activeCodeObj: null,
      tabObjAss: {},
      childObjAss: {},
      childHeightAss: {}
    }
  },
  computed: {
    tooltipString() {
      return v => {
        return v.join('、')
      }
    },
    isLeaf(list) {
      return list => {
        let arr = list.filter(e => e.children !== undefined && e.children !== null)
        if (arr.length > 0) {
          return false
        } else {
          return true
        }
      }
    },
    toggeleList(item) {
      return item => {
        if (item.toggle !== undefined) {
          if (item.toggle) {
            return item.children
          } else {
            let arr = item.children.slice(0, item.toggleNum)
            return arr
          }
        } else {
          return item.children
        }
      }
    },
    checkAllItem(item) {
      return item => {
        if (item.checkAll && !item.indeterminate) {
          return 'tab-check-all'
        } else if (!item.checkAll && item.indeterminate) {
          return 'tab-check-half'
        } else {
          return ''
        }
      }
    },
    showReset(list) {
      return list => {
        let arr = list.filter(e => e.codes.length > 0)
        if (arr.length > 0) return true
        return false
      }
    },
    tabContentWidth(id, choseId, filterObj) {
      // nextItem.id == activeCodeObj[`activeTab${item.id}`] ? filterObj.width + 'px' : 'auto'
      return (id, choseId, filterObj) => {
        return id == choseId ? filterObj.width - 50 + 'px' : 'auto'
      }
    },
    tabContentLeft(id, choseId, filterObj, tabObjAssLeft) {
      // nextItem.id == activeCodeObj[`activeTab${item.id}`] ? filterObj.left - tabObjAss[`activeTab${item.id}`] + 48 + 'px' : '0px'
      return (id, choseId, filterObj, tabObjAssLeft) => {
        return id == choseId ? filterObj.left - tabObjAssLeft + 48 + 'px' : '0px'
      }
    }
  },
  filters: {
    arrToString(v) {
      return v.join('、')
    },
    longString(v) {
      return v.join('、').slice(0, 20) + '...'
    }
  },
  watch: {
    treeData: {
      handler(newValue) {
        this.treeList = JSON.parse(JSON.stringify(newValue))
        if (this.useActiveCodeObj) {
          this.initialActiveCode(this.treeList)
        }
      },
      deep: true
    },
    gender: {
      handler(newValue) {},
      deep: true
    },
    initialRootArray: {
      handler(newValue) {
        this.rootArray = newValue
      },
      deep: true
    },
    highTreeData: {
      handler(newValue) {
        this.highTreeList = JSON.parse(JSON.stringify(newValue))
      },
      deep: true
    },
    activeCodeObj: {
      handler(newValue) {
        if (newValue != null) {
          this.initialTabContent()
        }
      },
      immediate: true,
      deep: true
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.treeList = JSON.parse(JSON.stringify(this.treeData))
      this.highTreeList = JSON.parse(JSON.stringify(this.highTreeData))
      if (this.useActiveCodeObj) {
        this.initialActiveCode(this.treeList)
      }
      this.loadingSke = false
    })
  },
  methods: {
    // 展开收起
    toggleAdvanced() {
      this.advanced = !this.advanced
    },
    toggleItem(item) {
      item.toggle = !item.toggle
    },
    // 清空筛选
    resetFilter() {
      this.rootArray = this.treeList.map(e => {
        return {
          checkValue: [],
          codes: [],
          names: [],
          title: e.name
        }
      })
      this.setTagList(this.treeList)
      if (this.highTreeList.length > 0) {
        this.highRootArray = this.highTreeList.map(e => {
          return { checkValue: [], codes: [], names: [], title: e.name }
        })
        this.setTagList(this.highTreeList)
        this.$emit('updateParams', this.rootArray, this.highRootArray)
      } else {
        this.$emit('updateParams', this.rootArray)
      }
      // console.log('resetFilter', this.treeList, this.highTreeList)
    },
    // 删除筛选条件中的标签
    handleClose(removedTag, index) {
      // console.log(removedTag, index)
      const result = this.treeList.filter(item => item.name == removedTag.title)
      if (result.length > 0) {
        this.setTagList(result)
      }
      const resultList = this.rootArray.filter(e => e.title == removedTag.title)
      if (resultList.length > 0) {
        resultList[0].checkValue = []
        resultList[0].names = []
        resultList[0].codes = []
      }
      // console.log(this.rootArray)
      // console.log(this.treeList)
      this.$emit('updateParams', this.rootArray)
    },
    // 处理筛选条件中删除的标签数组
    setTagList(data) {
      for (let item of data) {
        let arr = item.children.filter(e => e.children != undefined)
        if (arr.length > 0) {
          this.setTagList(item.children)
        } else {
          item.checkValue = []
          item.checkList = []
          item.indeterminate = false
          item.checkAll = false
        }
        /* if (item.children && item.children.length > 0) {
          const result = item.children.filter(e => e.leaf == true)
          if (item.children.length == result.length) {
            Object.assign(item, {
              checkValue: [],
              indeterminate: false,
              checkAll: false,
              checkList: []
            })
          } else {
            this.setTagList(item.children)
          }
        } */
      }
    },
    handleRootArray() {
      this.rootArray = []
      this.hanleTreeRoot(this.treeList, this.rootArray)
      if (this.highTreeData.length > 0) {
        this.highRootArray = []
        this.hanleTreeRoot(this.highTreeList, this.highRootArray)
        this.$emit('updateParams', this.rootArray, this.highRootArray)
      } else {
        this.$emit('updateParams', this.rootArray)
      }
    },
    hanleTreeRoot(list, rootArray) {
      for (let item of list) {
        let arr = item.children.filter(e => e.children != undefined)
        if (arr.length > 0) {
          // console.log('------多层-------')
          let temArr = []
          for (let childItem of item.children) {
            temArr = [...temArr, ...childItem.checkValue]
          }
          let obj = {
            checkValue: temArr,
            title: item.name,
            names: temArr.map(a => a.name),
            codes: temArr.map(a => a.code)
          }
          if (item.isCustom) {
            obj.cusArr = item.cusArr
            obj.isCustom = item.isCustom
          }
          rootArray.push(obj)
        } else {
          // console.log('------单层-------')
          let obje = {
            checkValue: item.checkValue,
            title: item.name,
            names: item.checkValue.map(a => a.name),
            codes: item.checkValue.map(a => a.code)
          }
          if (item.isCustom) {
            obje.cusArr = item.cusArr
            obje.isCustom = item.isCustom
          }
          rootArray.push(obje)
        }
      }
    },
    // 多选
    onCheckAllChange(e, item) {
      // console.log(e.target.checked, item)
      item.checkValue = e.target.checked ? item.children : []
      item.checkList = e.target.checked ? item.children.map(e => e.code) : []
      item.indeterminate = false
      item.checkAll = e.target.checked
      this.handleRootArray()
    },
    onCheckChange(value, item) {
      // console.log(value, item)
      item.checkList = value
      item.checkValue = []
      for (let i of item.children) {
        if (value.includes(i.code)) {
          item.checkValue.push(i)
        }
      }
      item.indeterminate = !!item.checkValue.length && item.checkValue.length < item.children.length
      item.checkAll = item.checkValue.length == item.children.length
      this.handleRootArray()
    },
    // 单选
    onRadioChange(e, item) {
      // console.log(e, item)
      let arr = e.slice(-1, e.length)
      item.checkList = []
      item.checkValue = []
      for (let child of item.children) {
        if (child.code == arr) {
          item.checkValue.push(child)
          item.checkList.push(child.code)
        }
      }
      item.cusArr = []
      if (item.checkList.length > 0) {
        if (item.isCustom) {
          let code = item.checkValue[0].code
          item.cusArr = [Number(code)]
          if (code == -1) {
            // 无消费
            item.cusArr = ['', 0]
          }
          if (item.checkValue[0].name.includes('以内')) {
            let code = parseInt(item.checkValue[0].code)
            if (code < 0) {
              item.cusArr = ['', -code]
            } else {
              item.cusArr = ['', code]
            }
          }
        }
      }
      this.handleRootArray()
    },
    // 自定义区间值
    changeCustomLowConfirm(e, item) {
      // console.log('low', e, e.target.value, item)
      e.target.blur()
      this.reSelectRadio(item)
    },
    changeCustomHighConfirm(e, item) {
      // console.log('high', e, e.target.value, item)
      e.target.blur()
      this.reSelectRadio(item)
    },
    // 自定义时反选
    reSelectRadio(item) {
      if (!(item.cusArr[0] > -1)) {
        item.cusArr[0] = ''
      }
      if (!(item.cusArr[1] > -1)) {
        item.cusArr[1] = ''
      }
      let cusStr = item.cusArr.join(',')
      item.checkList = []
      item.checkValue = []

      if (item.children.filter(e => e.code == '-1').length > 0 && (cusStr == '0,0' || cusStr == ',0')) {
        // 无消费情况
        item.checkList = ['-1']
        item.checkValue = item.children.filter(e => e.code == '-1')
      } else {
        // 有消费
        let result = item.children.filter(e => {
          let newStr = ''
          newStr = e.code
          if (!e.code.includes(',')) newStr = e.code + ','
          if (newStr == cusStr) return e
        })
        if (result.length > 0) {
          item.checkList = [result[0].code]
          item.checkValue = result
        }
      }
      this.handleRootArray()
    },
    onChange(e) {
      // 监听allowClear
      if (e.type == 'click') {
        this.searchText()
      }
    },
    searchText() {
      this.activeCode = ''
      this.$emit('updateSearchText', this.text)
      // 按需保留筛选条件
      if (this.searchKeep.length > 0) {
        if (this.text.length > 0) {
          let list = this.rootArray.map(item => {
            if (!(this.searchKeep.indexOf(item.title) > -1)) {
              item = {
                checkValue: [],
                codes: [],
                names: [],
                title: item.title
              }
            }
            return item
          })
          this.rootArray = JSON.parse(JSON.stringify(list))

          // 按需清除筛选项
          for (let item of this.treeList) {
            if (!(this.searchKeep.indexOf(item.name) > -1)) {
              let arr = item.children.filter(e => e.children != undefined)
              if (arr.length > 0) {
                for (let child of item.children) {
                  if (!(this.searchKeep.indexOf(child.name) > -1)) {
                    child.checkList = []
                    child.checkValue = []
                    child.checkAll = false
                    child.indeterminate = false
                  }
                }
              } else {
                item.checkList = []
                item.checkValue = []
              }
            }
          }
          this.$emit('updateParams', this.rootArray)
        } else if (this.text.length == 0) {
          this.$emit('updateParams', this.rootArray)
        }
      }
    },
    // 切换tab
    changeTab(id, index, pid) {
      this.filterObj = this.$refs.filterTree.getBoundingClientRect()
      if (this.useActiveCodeObj) {
        /* 初始化定位——防止侧边栏伸缩导致位移 */
        let arr = []
        Object.keys(this.activeCodeObj).forEach(key => {
          let value = this.activeCodeObj[key]
          if (value) {
            arr.push({
              title: key,
              value: value
            })
          } else {
            arr.push({
              title: '',
              value: ''
            })
          }
        })
        for (let item of arr) {
          if (item.title != '') {
            this.tabObjAss[item.title] = document.querySelector(`#childTab${item.value}`).getBoundingClientRect().left
            document.querySelector(`#child${item.value}`).style.display = 'initial'
          }
        }
        /* 初始化定位——防止侧边栏伸缩导致位移 */
        if (id == this.activeCodeObj[`activeTab${pid}`]) {
          this.activeCodeObj[`activeTab${pid}`] = ''
        } else {
          this.activeCodeObj[`activeTab${pid}`] = id
          document.querySelector(`#child${id}`).style.display = 'initial'
          this.tabObjAss[`activeTab${pid}`] = document.querySelector(`#childTab${id}`).getBoundingClientRect().left
        }
      } else {
        this.childObj = null
        if (this.activeCode == id) {
          this.activeCode = ''
          return
        }
        this.activeCode = id

        this.tabObj = document.querySelector(`#childTab${id}`).getBoundingClientRect()
        document.querySelector(`#child${id}`).style.display = 'initial'
        this.childObj = document.querySelector(`#child${id}`).getBoundingClientRect()
        this.childHeight = window.getComputedStyle(document.querySelector(`#child${id}`)).height
      }
    },
    resetSearchText() {
      this.text = ''
    },
    // 初始化activeCode
    initialActiveCode(treeList) {
      this.activeCodeObj = {}
      if (treeList.length == 0) {
        this.activeCodeObj = null
        return
      }
      for (let item of treeList) {
        let list = item.children
        let arr = list.filter(e => e.children !== undefined && e.children !== null)
        if (arr.length > 0) {
          this.activeCodeObj[`activeTab${item.id}`] = list[0].id
        }
      }
    },
    initialTabContent() {
      this.filterObj = this.$refs.filterTree.getBoundingClientRect()
      let arr = []
      Object.keys(this.activeCodeObj).forEach(key => {
        let value = this.activeCodeObj[key]
        arr.push({
          title: key,
          value: value
        })
      })
      // for (let item of arr) {
      //   this.tabObjAss[item.title] = 524
      // }
      this.$nextTick(() => {
        for (let item of arr) {
          this.tabObjAss[item.title] = document.querySelector(`#childTab${item.value}`).getBoundingClientRect().left
          document.querySelector(`#child${item.value}`).style.display = 'initial'
          // this.childObjAss[item.title] = document.querySelector(`#child${item.value}`).getBoundingClientRect()
          // this.childHeightAss[item.title] = window.getComputedStyle(document.querySelector(`#child${item.value}`)).height
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.filter-tree {
  margin-bottom: 12px;
  overflow: hidden;
}
.tags-toggle {
  display: flex;
  justify-content: space-between;
  // align-items: center;
  margin: 0;
  // min-height: 36px;
  .left {
    display: flex;
    // align-items: center;
    margin: 0;
    font-size: 14px;
    line-height: 36px;
    margin-bottom: 8px;
    > p {
      width: 60px;
      margin: 0 12px 0 0;
      white-space: nowrap;
    }
    /deep/ .ant-tag {
      font-size: 14px;
      margin: 8px 24px 8px 0;
      line-height: 24px;
    }
  }
  button {
    margin-top: 2px;
  }
}
.tags-content {
  position: relative;
  .title {
    font-size: 14px;
    color: #333;
    line-height: 30px;
    white-space: nowrap;
    margin-right: 14px;
    font-weight: 500;
  }
  .tag-list {
    display: flex;
    // font-size: 14px;
    .type-title {
      width: 100px;
      color: #999;
      line-height: 36px;
      height: 36px;
      margin: 0;
    }
    .type-content {
      min-height: 36px;
      line-height: 36px;
      display: flex;
      .leaf-list {
        // min-height: 36px;
        line-height: 36px;
        display: flex;
        flex-wrap: wrap;
      }
      .not-leaf-list {
        line-height: 36px;
      }
      .second-tag {
        margin-right: 24px;
        p {
          cursor: pointer;
        }
        .third-tag {
          display: flex;
          align-items: center;
          flex-wrap: wrap;
          line-height: 36px;
          p {
            margin-right: 24px;
            margin-bottom: 0;
          }
        }
      }
    }
  }
  .submit {
    margin-top: 12px;
    display: block;
  }
  .highest-toggle {
    display: block;
    right: 0;
    position: absolute;
    z-index: 5;
    // top: -48px;
    float: right;
  }
  .highest-content {
    width: 100%;
    transition: all 0.5s ease-in-out;
    overflow: hidden;
    height: auto;
  }
}
.line {
  /deep/ .ant-checkbox-wrapper {
    line-height: 22px;
    margin-right: 16px;
    margin-left: 0;
    margin-bottom: 12px;
    margin-top: 4px;
    span {
      word-break: keep-all;
      display: block;
      white-space: nowrap;
    }
    .ant-checkbox {
      display: none;
    }
  }
  /deep/.ant-checkbox-wrapper-checked {
    background: #1890ff;
    color: white;
    border-radius: 2px;
  }
}
.check-group {
  display: flex;
}
.radio-group {
  /deep/ .ant-radio-wrapper {
    line-height: 22px;
    margin-right: 16px;
    margin-left: 0;
    margin-bottom: 16px;
    .ant-radio {
      display: none;
    }
    span.ant-radio + * {
      line-height: 28px;
    }
  }
  /deep/ .ant-radio-wrapper-checked {
    background: #1890ff;
    color: white;
    border-radius: 2px;
  }
}
.tab-content {
  display: flex;
  flex-wrap: wrap;
  padding-top: 3px;
  margin-left: -8px;
}
.tabs {
  position: relative;
  p {
    border-radius: 2px;
    line-height: 30px;
    margin-right: 10px;
    word-break: keep-all;
    cursor: pointer;
    border: 1px solid #fff;
    background: #fff;
    padding: 0 6px;
    span {
      line-height: 22px;
      border-radius: 2px;
      display: block;
      padding: 0 8px;
    }
  }
  .active-tab {
    padding: 8px 6px;
    border: 1px solid #d9d9d9;
    border-bottom: 2px solid #fff;
    z-index: 3;
    top: -8px;
    position: relative;
  }
  .tab-check-all {
    background: #1890ff;
    color: white;
  }
  .tab-check-half {
    background: #1890ff;
    color: white;
    opacity: 0.6;
  }
  .tabs-children {
    position: absolute;
    padding: 8px;
    padding-top: 0;
    top: 31px;
    background: rgb(255, 255, 255);
    border: 1px solid #d9d9d9;
    z-index: 1;
    min-height: 40px;
    .check-all {
      position: absolute;
    }
    /deep/.ant-checkbox-wrapper {
      margin-top: 8px;
      margin-bottom: 0;
      height: 22px;
      line-height: 22px;
    }
    /deep/ .check-group {
      display: flex;
      overflow: hidden;
      flex-wrap: wrap;
      .ant-checkbox-wrapper:first-child {
        margin-left: 60px;
      }
    }
  }
}
.advanced-item {
  color: #1890ff;
  word-break: keep-all;
  display: flex;
  line-height: 30px;
  height: 30px;
  align-items: center;
  position: relative;
  top: -4px;
}
</style>

